<template>
	<view class="CloudInteraction">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('index.text-69')" left-icon="left" @clickLeft="goBack" 
			:border="false" />
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		 
		<view class="VotingInfoHeader">
			<view class="cue-text">
				{{$t('index.text-69')}}
			</view>
		</view>

		<view class="formText">
			<input v-model="item.value" :placeholder="$t('index.text-70')" v-for="item in formData" type="text" :key="item.id"></input>
			<view class="add" @click="add()"><text>+</text>{{$t('index.text-71')}}</view>
			<view class="submitCloud" @click="submitBtn()">{{$t('language.live4')}}</view>
		</view>
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import {
		event_list,
		collect_question_add
	} from "@/api/user";
	
	let timer = null
	export default {
		name: 'Collect',
		components: {
			uniIcons
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				eventId: '',
				formData: [{
					id: 1,
					value: ''
				}]
			}
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			let eventId = o.scene;
			this.eventId = eventId;
			this.getEventList()
		},
		created() {},
		methods: {
			submitBtn() {
				let content = []
				let filterData = this.formData.filter(item=>{
					if(item.value != '') {
						content.push(item.value)
					}
					return item.value != ''
				})
				if(filterData.length == 0) {
					return uni.showToast({
						title: this.$t('index.text-70'),
						icon: 'none'
					})
				}
				
				if(timer != null) return
				timer = setTimeout(()=>{
					clearTimeout(timer)
					timer = null
				}, 1000)
				
				collect_question_add({
					event_id: this.eventId,
					content: content.join('%')
				}).then(
					res => {
						if (res.code == 200) {
							let messagetips = this.$i18n.locale == 'zh' ? '提交成功' : 'Submit successfully'
							uni.showToast({
								title: messagetips,
								icon: 'success'
							})
							this.formData = [{
								id: 1,
								value: ''
							}]
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					err => {
						console.log(err)
					}
				);
			},
			add() {
				const index = this.formData.length - 1,
					  id = this.formData[index].id + 1;
				this.formData.push({
					id,
					value: ''
				})
			},
			getEventList() {
				event_list({
					page: 1
				})
			},
			goBack() {
				uni.reLaunch({
					url: "/pages/indexBox/index?evenId=" + this.eventId
				})
				// uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #050033;
	}
	
	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	.CloudInteraction {
		width: 100%;
		min-height: 100vh;
		background: #050033;
		box-sizing: border-box;
	}

	.VotingInfoHeader {
		padding: 30upx;
	}

	.cue-text {
		display: inline-block;
		width: auto;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		padding: 0 24upx;
		border-radius: 60upx 60upx 60upx 0;
		background-color: #d3a86a;
		color: #fff;
		font-size: 24upx;
	}
	
	.formText {
		padding: 30upx;
	}

	.formText input {
		background: #fff;
		border: none;
		resize: none;
		padding: 20upx 30upx;
		font-size: 30upx;
		border-radius: 8upx;
		margin-bottom: 30upx;
		color: #000000;
	}
	.add {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8upx;
		border: 2upx solid #b88d5b;
		color: #b88d5b;
		
		text {
			font-size: 44upx;
			line-height: 44upx;
			margin-right: 8upx;
		}
	}
	.submitCloud {
		width: 100%;
		text-align: center;
		height: 80upx;
		line-height: 80upx;
		border-radius: 80upx;
		margin-top: 80upx;
		background: #b88d5b;
		color: #fff;
	}
</style>